/* 
    此模块是用户中心_用户管理_角色维护
    crteae by xyr on 2017/09/13
 */
<template>
    <div class="app-container">
        <div class="wrapper role">
            <el-col :span="8" class="warp-main">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>角色列表
                        <span>共<span>{{queryTotal}}</span>条</span>
                    </p>
                    <!-- 角色信息列表展示.start -->    
                    <div style="padding:0px 10px;">
                        <el-table v-loading="loadingRoleDataTable" :data="tableData" highlight-current-row @row-click="roleTableRowClick" border style="width: 100%">
                            <el-table-column prop="name" label="角色名称">
                            </el-table-column>
                            <el-table-column prop="described" label="角色描述">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 分页.start -->
					<div v-show="pageLoading" class="pagination-container" style="text-align:center">
						<el-pagination 
							@current-change="handleCurrentChange" 
							:current-page.sync="listQuery.page"  
							:page-size="listQuery.pageSize" 
							layout="prev, pager, next" 
							:total="queryTotal">
						</el-pagination>
					</div>
					<!-- 分页.end -->
                    <!-- 角色信息列表展示.end -->

                    <!-- 角色维护表单.start -->
                    <el-form ref="roleFrom" :model="roleFrom" :rules="roleRules" label-width="80px">
                        <el-form-item label="角色名称" prop="name">
                            <el-input :disabled="disableRoleNameInput" v-model="roleFrom.name" placeholder="请输入角色名字"></el-input>
                        </el-form-item>
                        <el-form-item label="角色描述" prop="described">
                            <el-input v-model="roleFrom.described" placeholder="请输入角色描述"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="roleFrom.isSuperAdmin" label="是否超级管理员"></el-checkbox>
                        </el-form-item>
                        <el-form-item class="roleBtn">
                            <el-button type="primary" class="iconfont icon-xinzeng" @click="addRole">新增</el-button>
                            <el-button type="success" class="iconfont icon-baocun" @click="saveRole">保存</el-button>
                            <el-button type="danger" icon="el-icon-delete" :disabled="disableDeleteButton" @click="deleteRole">删除</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 角色维护表单.end -->
                </div>
            </el-col>
            <el-col :span="16" class="warp-main" style="padding-left:30px;">
                <!-- 
                                :data 树数据
                                :node-key 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的
                                :default-expanded-keys="[2, 3]" 默认展开的节点的 key 的数组
                                :default-checked-keys="[5]" 默认勾选的节点的 key 的数组
                                :props="props" 参数列表
                                @check-change 节点选中状态发生变化时的回调
                                @node-click 节点被点击时的回调
                                :load 加载子树数据的方法
                        -->
                <!-- 右边功能树.start -->
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>功能菜单明细</p>
                    <el-tree ref="functionTree"
                        :data="treeData" 
                        show-checkbox 
                        node-key="id" 
                        :load="loadNode" 
                        lazy 
                        :default-expanded-keys="defaultExpandedKeys" 
                        :props="defaultProps">
                    </el-tree>
                </div>
                <!-- 右边功能树.end -->
            </el-col>
        </div>
    </div>
</template>

/* 数据处理.start */
<script>
export default {
    data() {
        // 数据校验
        // 角色名称校验
        const validateName = (rule, value, callback) => {
            if (value.length < 2) {
				callback(new Error('角色名称不能为空'));
			} else {
				callback();
			}
        };

        // 角色描述校验
        const validateRoleDescribe = (rule, value, callback) => {
            if (value.length < 2) {
                callback(new Error('请输入角色描述'))
            } else {
                callback();
            }
        };

        return {
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                disabled: 'disabled'
            },
            // 角色列表table
            tableData: [],
            // 搜索输入框初始化
			queryTotal: 0,
			// 是否显示分页插件
			pageLoading: false,
			listQuery: {
          		page: 1,
				pageSize: 5,
				queryKey: ''  
            },
            // roel 表单实体对象
            roleFrom: {
                id: '',
                name: '',
                described: '',
                isSuperAdmin: false,
                function: ''
            },
            // 表单校验
            roleRules: { 
                name: [
                    { required: true, trigger: 'blur', validator: validateName }
                ],
                described: [
                     { required: true, trigger: 'blur', validator: validateRoleDescribe }
                ]
            },

            // 全局变量初始化
            disableDeleteButton: true,
            disableRoleNameInput: false,
            // 是否新增
            isAddRole: true,
            // 是否修改
            isUpdateRole: false,
            // 展开选中的树节点
            defaultExpandedKeys: [],
            // 角色数据列表遮罩
            loadingRoleDataTable: false,


        }; // end of return
    }, // end of data
    created() {
        this.getRole();
    }, // end of created
    methods: { // 方法集合
        // 分页搜索,当前页面改变触发事件
        handleCurrentChange(val) {
            // 获取当前是第几页
            this.listQuery.page = val;
            this.getRole();
        }, // end of handleCurrentChange
        // 获得角色数据
        getRole() {
            // 开启遮罩
            this.loadingRoleDataTable = true;
            this.httpClient.httpClientget(this.projectConfig.URL_API_ROLE_GET_ROLE,this.listQuery).then( res => {
                /* if (res.meta.code == this.projectConfig.CODE_OK) {
                    this.tableData = [];
                    this.tableData = res.data.items;
					this.queryTotal = res.data.total;
					if (res.data.total > this.listQuery.pageSize) {
						// 显示分页插件
						this.pageLoading = true;
					} else {
						// 关闭分页插件
						this.pageLoading = false;
					}
                } */
                // 关闭遮罩
                this.loadingRoleDataTable = false;

                // 进来就是200
                this.tableData = [];
                    this.tableData = res.data.items;
					this.queryTotal = res.data.total;
					if (res.data.total > this.listQuery.pageSize) {
						// 显示分页插件
						this.pageLoading = true;
					} else {
					// 关闭分页插件
					this.pageLoading = false;
				}
            }).catch(error => {
                // 关闭遮罩
                this.loadingRoleDataTable = false;
            });
        }, // end of getRole
        // 加载树菜单的子节点
        loadNode(node, resolve) {
            // this.resolveTemp = resolve;
            if (node.level === 0) {
                // 获得根节点
                this.httpClient.httpClientget(this.projectConfig.URL_API_FUNCTION_GET_ROOT_NODE, '').then(res => {
                    let _code = res.meta.code;
                    if (_code == this.projectConfig.CODE_OK) {
                        // 成功加载数据
                        return resolve(res.data);
                    } else {
                        return resolve([]);
                    }
                });
            } else {
                // 加载子节点
                let _id = node.data.id;
                if (typeof _id != 'undefined') {
                    const params = [_id];
                    this.httpClient.getParamOnPath(this.projectConfig.URL_API_FUNCTION_GET_CHILDREN_NODE , params).then(res => {
                        if (res.meta.code == this.projectConfig.CODE_OK) {
                            // 成功加载数据
                            return resolve(res.data);
                        } else {
                            return resolve([]);
                        }
                    })
                }
            };
        }, // end of loadNode
        // 新增角色
        addRole() {
            // 取消右边树菜单的选中
            this.$refs.functionTree.setCheckedKeys([]);

            // 清空表单
            this.$refs.roleFrom.resetFields();

            // 重置全局变量
            this.isAddRole = true;
            this.isUpdateRole = false;

            this.disableDeleteButton = true;
            this.disableRoleNameInput = false;
        }, // end of addRole
        // 保存角色
        saveRole() {
            // 表单校验
            this.$refs.roleFrom.validate(valid => {
                // 获得右边树选中的菜单
                const selectNodekedKeys = this.$refs.functionTree.getCheckedKeys(true);
                // console.log('selectNodekedKeys==' + selectNodekedKeys);

                // 校验通过
                if (valid) {

                    // 如果是超级管理员,权限列表为空
                    // 不是超级管理员,获得当前选中的菜单树节点
                    if (this.roleFrom.isSuperAdmin) {
                        this.roleFrom.function = '';
                    } else {
                        // 获得当前选中的菜单树节点
                        const checkedKeys = this.$refs.functionTree.getCheckedKeys();
                        if (checkedKeys.length == 0) {
                            
                            this.$notify({
                                title: '警告',
                                message: '新增加的用户不是超级用户,请分配功能菜单',
                                type: 'warning'
                            });
                            return false;
                        } else {
                            this.roleFrom.function = JSON.stringify(checkedKeys);
                        }
                        
                    }

                    // 是否新增
                    if (this.isAddRole) {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.roleFrom.name);
                        // post后台
                        this.httpClient.httpClientPost(this.projectConfig.URL_API_ROLE_ADD_ROLE,this.roleFrom).then(res => {
                            // 进来就是200
                            // 重置页面
                            this.addRole();
                            // 重新加载roletable
                            this.getRole();

                        });
                    } // end of isAddRole

                    // 是否修改
                    if (this.isUpdateRole) {
                        if (this.roleFrom.id.length == 0 || typeof this.roleFrom.id == 'undefined') {
                            this.$notify({
                                title: '警告',
                                message: '请选择一条角色信息',
                                type: 'warning'
                            });

                            return false;
                        } else {
                            // 操作审计
                            this.userBaseInfo.setOperObjectName(this.roleFrom.name);
                            this.httpClient.httpClientPatch(this.projectConfig.URL_API_ROLE_UPDATE_ROLE,this.roleFrom).then( res => {
                                // 进来就是200
                                // 重置页面
                                this.addRole(); 
                                // 重新加载roletable
                                this.getRole();
                            });
                        }
                    } // end of isUpdateRole
                } else {
                    return false;
                } // end of valid
            });
        }, // end of saveRole
        deleteRole() {
            let roleId = this.roleFrom.id;

            if (roleId.length == 0 && typeof roleId == 'undefined') {
                /* this.$message({
					showClose: true,
					message: '请选择一条功能菜单信息',
					type: 'warning',
					duration: 5 * 1000
                }); */
                this.$notify({
                    title: '警告',
                    message: '请选择一条角色信息',
                    type: 'warning'
                });

            } else {
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
        		}).then(() => {
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.roleFrom.name);
                    // let param = [ roleId ];
                    let deleteUrl = this.projectConfig.URL_API_ROLE_DELETE_ROLE + '/' + roleId;
					// 执行删除操作
					this.httpClient.httpClientDelete(deleteUrl,'').then( res => {
                        // 进来就是200
                        // 重置页面
                        this.addRole(); 
                        // 重新加载roletable
                        this.getRole();
                    })
                    
                    

				}).catch(() => {
					/* this.$message({
						type: 'info',
						message: '已取消删除'
          			}); */          
        		});
            }
        }, //  end of deleteRole
        // 点击角色table行事件 
        roleTableRowClick: function (row, event, column) {
            // 赋值表单
            this.roleFrom.id = row.id;
            this.roleFrom.name = row.name;
            this.roleFrom.described = row.described;
            this.roleFrom.isSuperAdmin = row.isSuperAdmin == 0 ? false : true;
            this.roleFrom.function = row.function;


            // 如果不是超级用户,得到功能列表,选中右边树节点
            if (row.isSuperAdmin == 1) {
                // 超级用户,由于保存的功能列表为空,所以此处要通过后台获得功能信息
                this.httpClient.httpClientget(this.projectConfig.URL_API_FUNCTION_GET_ROOT_NODE, '').then(res => {
                    let _code = res.meta.code;
                    if (_code == this.projectConfig.CODE_OK) {
                        // 成功加载数据
                       const data = [];
                       for (let i = 0;  i < res.data.length; i++){
                           data.push(res.data[i].id);
                       }
                       this.$refs.functionTree.setCheckedKeys(data);
                       this.defaultExpandedKeys = data;
                       
                    } else {
                        /* this.$message({
            				type: 'error',
							message: 'sorry,获取超级管理员的功能列表,失败',
							showClose: true,
							duration: 5 * 1000
                        }); */
                        this.$notify({
                            title: '警告',
                            message: '获取超级管理员的功能列表,失败',
                            type: 'error'
                        });
                    }
                });
            } else {
                if (row.function == null || row.function.length == 0) {
                    /* this.$message({
            				type: 'warning',
							message: '目前该角色还没分配功能菜单,请分配',
							showClose: true,
							duration: 5 * 1000
                    }); */
                    this.$notify({
                        title: '警告',
                        message: '目前该角色还没分配功能菜单,请分配',
                        type: 'warning'
                    });

                    this.$refs.functionTree.setCheckedKeys([]);
                } else {
                    this.$refs.functionTree.setCheckedKeys(JSON.parse(row.function));
                    this.defaultExpandedKeys = JSON.parse(row.function);
                }
            }

            if (row.id.length > 0 && typeof row.id != 'undefined') {
                // 可以修改
                this.isUpdateRole = true;
                this.isAddRole = false;

                // 可以删除
                this.disableDeleteButton = false;
                this.disableRoleNameInput = true;
            }
            
            
        }
    }
};
</script>
/* 数据处理.end */

/* 样式处理.start */
<style>
.role .el-table {
    margin: 16px 0;
}
.role .el-bar p {
    margin: 0;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d1dbe5;
}
.role .roleBtn .el-form-item__content{
   text-align: center;
   margin-left:30px !important;
}
.role .el-tree {
    border: none;
}

.role .el-bar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0px 0px 5px #eaeaea;
    padding: 10px;
}

.role .el-form {
    padding: 12px 20px;
}

.role .el-bar p i {
    color: #777;
    font-size: 15px;
    margin-right: 6px;
}

.role .form-btn {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    text-align: right;
}
</style>
/* 样式处理.end */